<template>
    <div>
        <el-form ref="form" :model="form" label-width="165px" :disabled="form.disabled">
            <el-row>
                <el-col :span="11">
                    <el-form-item label="年度" label-width="80px">
                         <el-date-picker
                          v-model="form.year"
                          type="year"
                          placeholder="选择年">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="土地总面积（km²）" label-width="210px">
                        <el-input v-model="form.mianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="水力侵蚀面积（km²）">
                        <el-input v-model="form.shuilimianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="水力侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.shuilibili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item label="微度侵蚀面积（km²）">
                        <el-input v-model="form.weidumianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="微度侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.weidubili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item label="轻度侵蚀面积（km²）">
                        <el-input v-model="form.qindumanji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="轻度侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.qindubili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item label="中度侵蚀面积（km²）">
                        <el-input v-model="form.zhongdumianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="中度侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.zhongdubili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="11">
                    <el-form-item label="强烈侵蚀面积（km²）">
                        <el-input v-model="form.qianliemianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="强烈侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.qiangleibili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="极强烈侵蚀面积（km²）">
                        <el-input v-model="form.jiqiangliemianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="极强烈侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.jiqiangliebili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="剧烈侵蚀面积（km²）">
                        <el-input v-model="form.juliemianji"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="13">
                    <el-form-item label="剧烈侵蚀占总面积比例（%）" label-width="210px">
                        <el-input v-model="form.juliebili" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div  class="dialog-footer"v-if="!form.disabled">
                <el-button @click="saveEdit">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        editVisible: {
            default : false
        },
        form: {
            default: () => {},
        },
    },
    data() {
        return{
            form: {}
        }
    },
    methods: {
        saveEdit() {
            this.$emit('close')
        }
    }
}
</script>
<style scoped>
    .dialog-footer {
        text-align: right
    }
</style>